'use client'; // 指示这段代码仅在客户端执行
import { useEffect, useState } from 'react'; // 导入 React 的 useEffect 和 useState 钩子
import i18next from 'i18next'; // 导入 i18next 库
import { UseTranslationOptions, initReactI18next, useTranslation as useTranslationOrg } from 'react-i18next'; // 导入 react-i18next 库的相关函数和类型
import { useCookies } from 'react-cookie'; // 导入 react-cookie 库的 useCookies 钩子
import resourcesToBackend from 'i18next-resources-to-backend'; // 导入 i18next-resources-to-backend 插件
import LanguageDetector from 'i18next-browser-languagedetector'; // 导入 i18next-browser-languagedetector 插件
import { getOptions, languages, cookieName } from './index'; // 导入配置和常量

const runsOnServerSide = typeof window === 'undefined'; // 判断代码是否在服务器端运行

// 初始化 i18next 实例
i18next
	.use(initReactI18next) // 使用 initReactI18next 插件
	.use(LanguageDetector) // 使用 LanguageDetector 插件来检测用户的语言
	.use(
		resourcesToBackend((language: string, namespace: string) => {
			console.log('执行了');

			// 使用 resourcesToBackend 插件来加载翻译资源
			return import(`./locales/${language}/${namespace}.json`); // 动态导入翻译文件
		})
	)
	.init({
		// 初始化 i18next
		...getOptions(), // 展开 getOptions 函数返回的配置对象
		lng: undefined, // 让 i18next 在客户端检测语言
		detection: {
			// 配置语言检测的顺序和方法
			order: ['path', 'htmlTag', 'cookie', 'navigator']
		},
		preload: runsOnServerSide ? languages : [] // 预加载的语言列表
	});

// 自定义 useTranslation 钩子
export function useTranslation(lng: string, ns: string, options?: undefined) {
	const [cookies, setCookie] = useCookies([cookieName]); // 使用 react-cookie 钩子来管理 cookies
	const ret = useTranslationOrg(ns, options); // 使用原始的 useTranslation 钩子
	const { i18n } = ret; // 获取 i18next 实例
	if (runsOnServerSide && lng && i18n.resolvedLanguage !== lng) {
		// 如果在服务器端且有指定语言
		i18n.changeLanguage(lng); // 切换语言
	} else {
		// eslint-disable-next-line react-hooks/rules-of-hooks
		const [activeLng, setActiveLng] = useState(i18n.resolvedLanguage); // 使用 useState 钩子来存储当前语言
		// eslint-disable-next-line react-hooks/rules-of-hooks
		useEffect(() => {
			// 使用 useEffect 钩子来监听语言变化
			if (activeLng === i18n.resolvedLanguage) return;
			setActiveLng(i18n.resolvedLanguage);
		}, [activeLng, i18n.resolvedLanguage]);
		// eslint-disable-next-line react-hooks/rules-of-hooks
		useEffect(() => {
			// 另一个 useEffect 钩子来处理语言切换
			if (!lng || i18n.resolvedLanguage === lng) return;
			i18n.changeLanguage(lng);
		}, [lng, i18n]);
		// eslint-disable-next-line react-hooks/rules-of-hooks
		useEffect(() => {
			// 监听语言变化并更新 cookie
			if (cookies.i18next === lng) return;
			setCookie(cookieName, lng, { path: '/' });
		}, [lng, cookies.i18next, setCookie]);
	}
	return ret; // 返回翻译函数和 i18next 实例
}
